<template>
	<div id="classify">
		<div v-for="item in six" class="six" @click="classifyabout(item.id)">
			<div class="siximgs">
				<img :src="item.img" class="siximg">
			</div>
			<div class="sixname">
				{{item.name}}
			</div>
		</div>
	</div>
</template>

<script>
	export default
	{
		data()
		{
			return{
				six:[
					{
						"id":1,
						"img":"./images/首页@3x_13.jpg",
						"name":"Mac"
					},
					{
						"id":2,
						"img":"./images/首页@3x_15.jpg",
						"name":"iPad"
					},
					{
						"id":3,
						"img":"./images/首页@3x_17.jpg",
						"name":"iPhone"
					},
					{
						"id":4,
						"img":"./images/首页@3x_23.jpg",
						"name":"Watch"
					},
					{
						"id":5,
						"img":"./images/首页@3x_25.jpg",
						"name":"Music"
					},
					{
						"id":6,
						"img":"./images/首页@3x_27.jpg",
						"name":"配件"
					}
				]
			}
		},
		methods:
		{
			classifyabout(id)
			{
				if(id==1)
				{
					this.$router.push('mac?id='+id)
				}
				else if(id==2)
				{
					this.$router.push('ipad?id='+id)
				}
				else if(id==3)
				{
					this.$router.push('iphone?id='+id)
				}
				else if(id==4)
				{
					this.$router.push('watch?id='+id)
				}
				else if(id==5)
				{
					this.$router.push('music?id='+id)
				}
				else
				{
					this.$router.push('part?id='+id)
				}
			}
		}
	}
</script>

<style>
	#classify{
		width: 100%;
		height: 270px;
		background-color: #f5f5f5;
		margin-top: 50px;
	}
	.six{
		width: 30%;
		height: 120px;
		background-color: white;
		border-radius: 5%;
		float: left;
		margin-top: 10px;
		margin-left: 2%;
		margin-right: 1%;
	}
	.siximgs{
		width: 45%;
		height: 120px;
		float: left;
	}
	.sixname{
		width: 52%;
		height: 120px;
		font-size: 1.25rem;
		line-height: 120px;
		font-weight: 600;
		float: left;
	}
	.siximg{
		width: 50px;
		height: 50px;
		margin-top: 35px;
		float: right;
	}
</style>
